<template>
  <div class="overflow-hidden">
    <n-card title="" :bordered="false" class="h-full rounded-8px shadow-sm">
      <div class="flex-col h-full">
        <n-space class="pb-12px" justify="space-between">
          <n-space>
						<n-input v-model:value="episode" type="text" placeholder="请输入集数" clearable/>
            <n-button type="primary" @click="handleAddTable">
              查询
            </n-button>
						<div style="color: red;line-height: 35px;">总收益: {{ income }}&nbsp;&nbsp;&nbsp;总浏览量: {{ views }}</div>
          </n-space>
          <n-space align="center" :size="18">
            <n-button
              size="small"
              type="primary"
              @click="getTableData()"
            >
              <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
              刷新表格
            </n-button>
            <column-setting v-model:columns="columns" />
          </n-space>
        </n-space>
        <n-data-table
          remote
          :columns="columns"
          :data="tableData"
          :loading="loading"
          :pagination="pagination"
          flex-height
          class="flex-1-hidden"
        />
      </div>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import type { Ref } from 'vue';
import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui';
import type { DataTableColumns, PaginationProps } from 'naive-ui';
import { selectOperatorDuanjuEpisodeList } from '@/service';
import { useBoolean, useLoading } from '@/hooks';
import ColumnSetting from './components/column-setting.vue';
import { useRoute,useRouter } from "vue-router"

const { loading, startLoading, endLoading } = useLoading(false);
const { bool: visible, setTrue: openModal } = useBoolean();
const route = useRoute()
const router = useRouter()

const columns: Ref<DataTableColumns<any>> = ref([
	{
    key: 'Id',
    title: 'ID',
    align: 'center'
  },
  {
    key: 'Name',
    title: '短剧名称',
    align: 'center'
  },
  {
    key: 'SurfacePlot',
    title: '短剧封面',
    align: 'center',
    render: (row: any) => {
      return (
				<n-image
					width="50"
					lazy
					src={row.SurfacePlot}
				/>
      );
    }
  },
	{
    key: 'Number',
    title: '剧集',
    align: 'center'
  },
	{
    key: 'income',
    title: '收益',
    align: 'center'
  },
	{
    key: 'views',
    title: '浏览量',
    align: 'center'
  },
	{
    key: 'addViews',
    title: '新增浏览量',
    align: 'center'
  }

]) as Ref<any>;

// 短剧Id
let duanju_id:any = ref(null)
// 第几集
let episode:any = ref(null)
// 查询
function handleAddTable() {
  pagination.page = 1
	getTableData()
}

// 总收益
let income = ref(null)
// 总浏览
let views = ref(null)

const tableData = ref<any>([]);
async function getTableData() {
  startLoading();
	let params = {
		page: pagination.page,
		page_size: pagination.pageSize,
		duanju_id: duanju_id.value,
    operator_id: route.query.operator_id,
		episode: episode.value
	}
  const { data } = await selectOperatorDuanjuEpisodeList(params);
	// console.log(data);
  if (data) {
    income.value = data.income
		views.value = data.views
    tableData.value = data.item;
    tableData.value.forEach((element:any) => {
      element.SurfacePlot = route.query.SurfacePlot
      element.Name = route.query.Name
    });
    pagination.itemCount = data.total;
    endLoading();
  }
}

// 分页
const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
    getTableData();
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
    getTableData();
  }
});

function init() {
	duanju_id.value = route.query.duanju_id
  getTableData();
}

// 初始化
init();
</script>

<style scoped></style>
